<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <div class="tittle_row">
      <div class="Tittle kuai">
        <img
          src="https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic4.canyin375.com_uploads_allimg_200928_1-20092Q52P2291.jpg&refer=http___pic4.canyin375.webp"
          class="Tittle_img"
        />
      </div>
      <div class="kuai">
        <h1>商品名称：{{ this.tittleData.name }}</h1>
        <h1>地址：{{ this.tittleData.posision }}</h1>
        <h1>联系电话：{{ this.tittleData.phone }}</h1>
      </div>
      <div class="back">
        <el-button type="danger" @click="Toback"> 返回上级 </el-button>
      </div>
    </div>
    <!-- 图片卡片 -->
    <template>
      <div class="PhotoSet" v-for="(item, index) in tableData" :key="index">
        <img :src="item.url" class="image" />
        <div class="pp">
          <div>菜名：{{ item.name }}</div>
          <div>价格：{{ item.price }}</div>
          <div>
            <el-button
              class="button"
              type="primary"
              size="mini"
              plain
              @click="LookMore(index)"
              >查看更多</el-button
            >
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>
        
        <script>
export default {
  created() {},
  data() {
    return {
      input: "",
      tittleData: {
        name: "书宜烧仙草",
        posision: "东软后街",
        phone: "132xxx243",
      },
      tableData: [
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___lmg.jj20.com_up_allimg_1115_120R11I602_21120QI602-4-1200.jpg&refer=http___lmg.jj20.webp",
          name: "红烧肉",
          price: "14元",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/u=1232541259,4067028265&fm=253&fmt=auto&app=138&f=JPEG.webp",
          name: "红烧肉",
          price: "14元",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___lmg.jj20.com_up_allimg_811_0HQ4104127_140HQ04127-5-1200.jpg&refer=http___lmg.jj20.webp",
          name: "红烧肉",
          price: "14元",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/src=http___pic1.win4000.com_wallpaper_7_540eb0ec0f25c.jpg_down&refer=http___pic1.win4000.webp",
          name: "红烧肉",
          price: "14元",
        },
        {
          url: "https://picgo-photos.oss-cn-hangzhou.aliyuncs.com/img/u=3758467693,3938454272&fm=253&fmt=auto&app=120&f=JPEG.webp",
          name: "红烧肉",
          price: "14元",
        },
      ],
    };
  },
  methods: {
    LookMore(val) {
      console.log(val);
      this.$router.push("/CaiMore");
    },
    Toback() {
      this.$router.push("/Hot");
    },
  },
};
</script>
        
    <style scoped slot="less">
.el-input {
  display: inline-block;
}
h1 {
  text-align: center;
}
.tittle_row {
  margin: 50px;
}
.back {
  float: right;
}
.Tittle {
  background-color: rgb(241, 241, 241);
  display: inline-block;
  border-radius: 20px;
  box-shadow: 3px 6px rgba(168, 166, 166, 0.6);
  height: 100%;
  width: 20%;
  overflow: hidden;
  margin-right: 20px;
}
.Tittle_img {
  width: 100%;
}
.kuai {
  display: inline-block;
  vertical-align: middle;
}
/* 图片卡片 */
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.PhotoSet {
  background-color: rgb(241, 241, 241);
  display: inline-block;
  padding-top: 30px;
  border-radius: 20px;
  box-shadow: 3px 6px rgba(168, 166, 166, 0.6);
  margin: 50px 60px;
  height: 100%;
  width: 25%;
}
.pp {
  text-align: center;
  padding: 10px;
}
.button {
  margin-top: 10px;
  padding: 10px;
  font-size: 17px;
}

.image {
  width: 80%;
  margin-left: 10%;
  display: block;
}
</style>
        